<template>
  <div class="mainerRight">
    <div class="header">
      <div class="info">
        <!-- 图片 -->
        <div class="cover">
          <img :src="playList.coverImgUrl" />
          <div class="mask"></div>
        </div>
        <!-- 文字信息 -->
        <div class="cnt">
          <div class="hd">
            <h4>{{ playList.name }}</h4>
          </div>
          <div class="user">
            <i class="icn" style="overflow: hidden"></i>
            <span class="sep">huhooo_BMnC</span>
            <span class="fc">2018-05-28 创建</span>
          </div>
          <!-- 底部按钮 -->
          <div class="btns">
            <a class="play" title="播放">
              <i class="ply"></i>
              <span >播放</span>
            </a>
            <a class="add"></a>
            <a class="dis">
              <span>收藏</span>
            </a>
            <a class="share">
              <span>分享</span>
            </a>
            <a class="download">
              <span>下载</span>
            </a>
            <a class="comment">
              <span>评论</span>
            </a>
          </div>
        </div>
      </div>
    </div>
    <SongList :playList="songList" :songList="SongList"></SongList>
    <Comment></Comment>
   

  </div>
</template>

<script>
import SongList from "./SongList";
import Comment from "./Comment";
import { GetPlayList  } from "@/request/api";
export default {
  name: "toplistmainerright",
  components: { SongList, Comment },
  data() {
    return {
      playList: {},
      num: "刚刚更新",
      songList: {},
      SongList: {},
    
    };
  },
   
  computed: {
    id() {
      if (this.$route.query.id == undefined) return "2244735104";
      return this.$route.query.id;
    },
  },
  watch: {
    id() {
      this.getPlayList();
    },
  },
  methods: {},
  created() {
    //获取用户歌单详情
    GetPlayList(this.id, localStorage.getItem("COOKIE")).then((res) => {
      console.log(res.data);
      this.playList = res.data.playlist;
    });
  },
};
</script>

<style lang='less' scoped>
.mainerRight {
  width: 740px;
  background-color: #fff;
  float: right;

  .header {
    width: 100%;
    padding: 40px;

    .info {
      width: 100%;
      height: 100%;
      display: flex;

      .cover {
        width: 158px;
        height: 158px;
        padding: 3px;
        border: 1px solid #ccc;
        position: relative;

        img {
          width: 150px;
          height: 150px;
          display: block;
          margin: auto;
          margin-top: 3px;
        }

        .mask {
          width: 150px;
          height: 150px;
          position: absolute;
          z-index: 2;
          top: 3px;
          left: 3px;
          background: url("../img/cover.png") no-repeat -230px -380px;
        }
      }

      .cnt {
        width: 473px;
        height: 114px;
        margin-top: 20.5px;
        padding-left: 33px;

        .hd {
          width: 473px;
          height: 24px;

          h4 {
            font-weight: normal;
            font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif !important;
            font-size: 20px;
            color: #333;
          }
        }

        .user {
          margin-top: 5px;
          width: 100%;
          height: 35px;
          line-height: 35px;
          margin-bottom: 20px;
          font-size: 12px;

          i {
            display: inline-block;
            width: 13px;
            height: 13px;
            position: relative;
            top: 2px;
            margin-left: 3px;
            background: url("../img/icon.png") no-repeat -18px -682px;
          }

          .sep {
            margin-right: 10px;
            margin-left: 5px;
          }
        }

        .btns {
          height: 31px;
          display: flex;

          .play {
            width: 60px;
            padding-left: 5px;
            background: url("../img/button2.png") no-repeat 0 -1652px;
            text-align: center;
            line-height: 29px;
            // height: 31px;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;

            i {
              width: 20px;
              height: 18px;
              margin: 7px 0 2px 2px;
              float: left;
              background: url("../img/button2.png") no-repeat 0 -1622px;
            }

            span {
              color: #fff;
              font-size: 12px;
            }

            &:hover {
              cursor: pointer;
            }
          }

          .add {
            width: 31px;
            height: 31px;
            margin-right: 5px;
            background: url("../img/button2.png") no-repeat 0 -1588px;

            &:hover {
              cursor: pointer;
              background-position: -40px -1588px;
            }

            &:active {
              background-position: -80px -1588px;
            }
          }

          .dis {
            margin-right: 6px;
            height: 100%;
            background: url("../img/button2.png") no-repeat;
            background-position: 0px -1063px;

            span {
              display: inline-block;
              height: 100%;
              background: url("../img/button2.png") no-repeat right -1106px;
              line-height: 30px;
              padding-left: 30px;
              padding-right: 4px;
              font-size: 12px;
              color: #ccc;
            }

            &:hover {
              color: #666;
              cursor: pointer;
            }
          }

          .share {
            height: 31px;
            margin-right: 6px;
            float: left;
            min-width: 23px;
            cursor: pointer;
            background: url("../img/button2.png") no-repeat;
            background-position: 0 -1225px;

            span {
              height: 100%;
              display: inline-block;
              line-height: 30px;
              padding-left: 28px;
              padding-right: 4px;
              background: url("../img/button2.png") no-repeat;
              background-position: right -1020px;
              font-size: 12px;
            }

            &:hover {
              color: #666;
              cursor: pointer;
            }
          }

          .download {
            margin-right: 5px;
            height: 31px;
            min-width: 23px;
            cursor: pointer;
            background: url("../img/button2.png") no-repeat;
            background-position: 0 -2761px;

            span {
              height: 100%;
              display: inline-block;
              line-height: 30px;
              padding-left: 28px;
              padding-right: 8px;
              background: url("../img/button2.png") no-repeat;
              background-position: right -1020px;
              font-size: 12px;
            }

            &:hover {
              color: #666;
              cursor: pointer;
            }
          }

          .comment {
            margin-right: 5px;
            height: 31px;
            min-width: 23px;
            cursor: pointer;
            background: url("../img/button2.png") no-repeat;
            background-position: 0 -1465px;

            span {
              height: 100%;
              display: inline-block;
              line-height: 30px;
              padding-left: 28px;
              padding-right: 8px;
              background: url("../img/button2.png") no-repeat;
              background-position: right -1020px;
              font-size: 12px;
            }

            &:hover {
              color: #666;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>